{% layout = "base.html" %}

{-title-}修改密码{-title-}

{-content-}
<div class="row" id="password_reset" v-cloak>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6">
        <!-- Start to reset -->
        <form method="POST"
            v-if="start_reset">
            <div class="form-group">
                <h3>重置密码</h3>
                <p>输入邮件地址，我们会发送一个链接来重置您的密码。</p>
            </div>
            <div class="form-group row">
                <label for="inputEmail" class="col-sm-4 col-form-label">邮件地址</label>
                <div class="col-sm-8">
                    <input name="email" type="text" class="form-control" id="inputEmail" placeholder="邮件地址"
                        value="{{ email }}">
                </div>
            </div>
            <div v-if="error" class="form-group alert alert-danger" role="alert">
                [[ error ]]
            </div>
            <div v-if="info" class="form-group alert alert-info" role="alert">
                [[ info ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                </div>
                <div class="col-sm-8">
                    <button type="submit" onclick="disableBtn(this);" class="btn btn-primary">发送重置密码邮件</button>
                </div>
            </div>
        </form>

        <!-- Done reset -->
        <form method="POST" v-on:submit.prevent
            v-else-if="reset_done">
            <div class="form-group">
                <h3>重置密码成功</h3>
            </div>
            <div v-if="info" class="form-group alert alert-info" role="alert">
                [[ info ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <a href="/user/signin" class="btn btn-primary">登录</a>
                </div>
            </div>
        </form>

        <!-- Enter new password -->
        <form method="POST" v-on:submit="checkInputPassword($event)"
            v-else>
            <div class="form-group">
                <h3>重置密码</h3>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-4 col-form-label">新密码</label>
                <div class="col-sm-8">
                    <input v-model="password" name="password" type="password" class="form-control" id="inputPassword" placeholder="新密码">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPasswordConfirm" class="col-sm-4 col-form-label">确认新密码</label>
                <div class="col-sm-8">
                    <input v-model="password_confirm" type="password" class="form-control" id="inputPasswordConfirm" placeholder="确认密码">
                </div>
            </div>
            <div v-if="error" class="form-group alert alert-danger" role="alert">
                [[ error ]]
            </div>
            <div v-if="info" class="form-group alert alert-info" role="alert">
                [[ info ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-primary">更新密码</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
    </div>
</div>

<script type="text/javascript">

function disableBtn(btn) {
    setTimeout(function () {
        btn.disabled = true;
    });
}

var profileApp = new Vue({
	delimiters: ['[[', ']]'],
  	el: '#password_reset',
  	data: {
        reset_done: {* reset_done *},
        start_reset: {* start_reset *},

        password: '',
        password_confirm: '',
        error: decodeHtml('{{ error }}'),
        info: decodeHtml('{{ info }}'),
    },
	methods: {
        checkInputPassword(event) {
            this.error = ValidatePasswordChars(this.password);
            if (this.error) {
                event.preventDefault();
                return;
            }

            if (!this.password || !this.password_confirm) {
                this.error = '请输入密码和新确认密码。';
                event.preventDefault();
                return;
            }

            if (this.password != this.password_confirm) {
                this.error = "输入的密码不一致";
                event.preventDefault();
                return;
            }
		},
  	}
});

</script>

{-content-}

